<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page session="false" %>
<%@include file="/common/taglibs.jsp" %>
<%@include file="/common/no-cache.jsp" %>
<%@include file="/common/common-header.jsp" %>
<%@ page language="java" import="java.util.*" pageEncoding="utf-8" %>
<html>
<head>
	<title>我是林小生</title>
	<link rel="stylesheet" href="${ctx}/resources/css/linxs.css">
</head>
<body class="view-list">
<div class="container">

    <div class="profile profile-400">
        <div class="art" data-height="400">
            <img src="${ctx}/resources/images/banner.jpeg" alt="我是林小生" style="width: 960px; height: 513px; top: -56px; visibility: visible;">
        </div>
        <a href="${ctx}/" class="avatar" style="visibility: visible;"><img src="${ctx}/resources/images/logo.jpg"></a>
        
		<div class="info clearfix">
		    <div class="card">
		        <h1 class="title"><a href="${ctx}/">我是林小生</a></h1>
		        <div class="bio">The relentless pursuit of perfection</div>
		    </div>
		    <ul class="toolbar">
		        <li>
		            <a class="toolbar-icon icon-search" title="搜索">搜索</a>
		            <div class="search-box" style="display:inline;">
		                <form class="search-form" action="${ctx}/"><input type="text" name="tag" class="search-text"></form>
		            </div>
		        </li>
		        <li><a class="toolbar-icon icon-inbox" target="_blank" href="#" title="私信">私信</a></li>
		        <li><a class="toolbar-icon icon-contribute" target="_blank" href="#" title="投稿">投稿</a></li>
		        <li><a class="toolbar-icon icon-archive" target="_blank" href="#" title="存档">存档</a></li>
		        <li><a class="toolbar-icon icon-rss" target="_blank" href="#" title="RSS">RSS</a></li>
		        <li><a class="toolbar-icon icon-ex-open" target="_blank"></a></li>
		    </ul>
		</div>
	</div>
	
	
	
    <div id="timeline" class="timeline clearfix">
    	
    	<c:forEach items="${page.result}" var="article" varStatus="status">
    		<c:choose >
    			<c:when test="${status.index % 2 == 0}">
    			
	    			<div class="post post-text post-left post-hover">
		                <a class="post-arrow" target="_blank" href="#none" title="Jul 9th 3 pm"></a>
		                <div class="post-meta">
		                    <div class="operation-bar" style="display: block;">
		                        <a href="#none" target="_blank" title="全文链接" class="icon-redirect">全文链接</a>
		                        <a href="#none" target="_blank" title="转载" class="icon-reblog">转载</a>
		                    </div>
		                    <a href="#none" target="_blank" class="post-date">Jul 9th 3 pm</a>
		                    <a href="#none" target="_blank" class="post-type icon-text">文字</a>
		                </div>
		                <div class="post-content">
		                    <h2 class="title"><a href="${ctx}/article/${article.id}">${article.title}</a></h2>
		                    <div class="rich-content rich-content-with-title">
		                        <h4>
		                        	<c:choose>
		                        		<c:when test="${fn:length(article.content) gt 200 }">
		                        			${fn:substring(article.content, 0, 200) }
		                        		</c:when>
		                        		<c:otherwise>
				                        	${article.content}
		                        		</c:otherwise>
		                        	</c:choose>
	                        	</h4>
		                    </div>
		                </div>
		            </div>
		            
    			</c:when>
    			
    			<c:otherwise>
    			
	    			<div class="post post-text post-right" >
		    	        <a class="post-arrow" target="_blank" href="#none" title="Jul 9th 3 pm"></a>
		    	        <div class="post-meta">
		    	            <div class="operation-bar" style="display: block;">
		    	                <a href="#none" target="_blank" title="全文链接" class="icon-redirect">全文链接</a>
		    	                <a href="#none" target="_blank" title="转载" class="icon-reblog">转载</a>
		    	            </div>
		    	            <a href="#none" target="_blank" class="post-date">Jul 9th 3 pm</a>
		    	            <a href="#none" target="_blank" class="post-type icon-text">文字</a>
		    	        </div>
		    	        <div class="post-content">
		    	            <h2 class="title"><a href="${ctx}/article/${article.id}">${article.title}</a></h2>
		    	            <div class="rich-content rich-content-with-title">
		    	                <h4>
		                        	<c:choose>
		                        		<c:when test="${fn:length(article.content) gt 200 }">
		                        			${fn:substring(article.content, 0, 200) }... ...
		                        		</c:when>
		                        		<c:otherwise>
				                        	${article.content}
		                        		</c:otherwise>
		                        	</c:choose>
	                        	</h4>
		    	            </div>
		    	        </div>
		            </div>
    			
    			</c:otherwise>
    		</c:choose>
    	</c:forEach>
    
    </div>
    <div class="timeline-loading" style=""></div>
    <input type="hidden" id="pageNo" value="2">
</div>
<script type="text/javascript">
	$(function() {
		
		$(window).scroll(function() {
			var thistop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
			var top = parseInt(thistop);
			var height = $("#timeline").height();
			
			if((height - top) < 100 ) {
				$.ajax({
					url : "${ctx}/linxs/get/" + $("#pageNo").val(),
					dataType : "json",
					type : "get",
					success : function(data) {
						if(data.length === 0) {
							$(".timeline-loading").remove();
						}
						for(var i = 0; i < data.length; i += 1) {
							var content = data[i].content.length > 200 ? data[i].content.substring(0, 200) : data[i].content;
							var htmlLeftContent = "<div class='post post-text post-left post-hover'><a class='post-arrow' target='_blank' href='#none' title='Jul 9th 3 pm'></a><div class='post-meta'><div class='operation-bar' style='display: block;'><a href='#none' target='_blank' title='全文链接' class='icon-redirect'>全文链接</a><a href='#none' target='_blank' title='转载' class='icon-reblog'>转载</a></div><a href='#none' target='_blank' class='post-date'>Jul 9th 3 pm</a><a href='#none' target='_blank' class='post-type icon-text'>文字</a></div><div class='post-content'><h2 class='title'><a href='${ctx}/article/" + data[i].id + "'>" + data[i].title + "</a></h2><div class='rich-content rich-content-with-title'><h4>" + content + "</h4></div></div></div>";
							var htmlRightContent = "<div class='post post-text post-right'><a class='post-arrow' target='_blank' href='#none' title='Jul 9th 3 pm'></a><div class='post-meta'><div class='operation-bar' style='display: block;'><a href='#none' target='_blank' title='全文链接' class='icon-redirect'>全文链接</a><a href='#none' target='_blank' title='转载' class='icon-reblog'>转载</a></div><a href='#none' target='_blank' class='post-date'>Jul 9th 3 pm</a><a href='#none' target='_blank' class='post-type icon-text'>文字</a></div><div class='post-content'><h2 class='title'><a href='${ctx}/article/" + data[i].id + "'>" + data[i].title + "</a></h2><div class='rich-content rich-content-with-title'><h4>" + content + "</h4></div></div></div>";
							
							if(i % 2 == 0) {
								$("#timeline").append(htmlLeftContent);
							} else {
								$("#timeline").append(htmlRightContent);
							}
						}
						var pageNo =  parseInt($("#pageNo").val()) + 1;
						$("#pageNo").attr("value", pageNo);
					}
				});
			}
			
		});
		
	});
</script>
</body>
</html>
